<template>
	<div style="color:aliceblue">
		<div class="d-flex jc-center">
			<dv-decoration-10 class="dv-dec-10" />
			<div class="d-flex jc-center">
				<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
				<div class="title">
					<span class="title-text"> {{ title }} </span>
					<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
				</div>
				<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
			</div>
			<dv-decoration-10 class="dv-dec-10-s" />
		</div>
		<div class="d-flex jc-between px-2">
			<div class="d-flex aside-width">
				<div class="react-left bg-color-blue ml-4 react-l-s"  @click="clickMenu(menus[0])">
					<span class="react-left"></span>
					<span class="text">{{ menus[0].title }}</span>
				</div>
				<div class="react-left  ml-3" @click="clickMenu(menus[1])">
					<span class="text">{{ menus[1].title }}</span>
				</div>
			</div>
			<div class="d-flex aside-width">
				<div class="react-right bg-color-blue mr-3">
					<span class="text fw-b" @click="clickMenu(menus[2])">{{ menus[2].title }}</span>
				</div>
				<div class="react-right mr-4 react-l-s">
					<span class="react-after"></span>
					<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { formatTime } from '@/utils'

export default {
	props: {
		title:{
			type: String,
		},
		menus: {
			type: Array,
		}
	},
	data() {
		return {
			timing: null,
			loading: true,
			dateDay: null,
			dateYear: null,
			dateWeek: null,
			weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			decorationColor: ['#568aea', '#000000']
		}
	},
	mounted() {
		this.timeFn()
		this.timing = setInterval(() => {
			this.timeFn()
		}, 1000)
	},
	beforeDestroy() {
		clearInterval(this.timing)
	},
	methods: {
		timeFn() {
			this.dateDay = formatTime(new Date(), 'HH: mm: ss')
			this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
			this.dateWeek = this.weekday[new Date().getDay()]
		},
		clickMenu(menu){
			this.$emit("select",menu)
		}
	}
}
</script>
<style scoped>
.dv-dec-10,
.dv-dec-10-s {
	width: 33.3%;
	height: 5px;
}

.dv-dec-10-s {
	transform: rotateY(180deg);
}

.dv-dec-8 {
	width: 200px;
	height: 50px;
}

.title {
	position: relative;
	width: 500px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.title .title-text {
	font-size: 24px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
}

.title .dv-dec-6 {
	position: absolute;
	bottom: -30px;
	left: 50%;
	width: 250px;
	height: 8px;
	transform: translate(-50%);
}

.aside-width {
	width: 40%;
}

.react-r-s,
.react-l-s {
	background-color: #0f1325;
}

.react-right.react-l-s {
	text-align: right;
	width: 500px;
}

.react-right {
	font-size: 18px;
	width: 300px;
	line-height: 50px;
	text-align: center;
	transform: skewX(-45deg);
}

.react-right .react-after {
  position: absolute;
  right: -25px;
  top: 0;
  height: 50px;
  width: 50px;
  background-color: #0f1325;
  transform: skewX(45deg);
  transition: background-color 0.3s, transform 0.3s;
}

.react-right .react-after:hover {
  //background-color: #1f2335;
  transform: skewX(45deg) translateX(-5px) rotate(5deg);
}

.react-right .text {
	display: inline-block;
	transform: skewX(45deg);
}

.react-right .text:hover {
	color: #0a1c3b;
    text-decoration: underline;
   cursor: pointer;
}
.react-left.react-l-s {
	width: 500px;
	text-align: left;
}

.react-left {
  font-size: 18px;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transform: skewX(45deg);
  background-color: #0f1325;
  transition: background-color 0.3s, transform 0.3s;
}

.react-left:hover {
  background-color: #052de1;

}

.react-left .react-left {
position: absolute;
left: -25px;
top: 0;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
transition: background-color 0.3s, transform 0.3s;
cursor: pointer;
}

.react-left :hover {
//background-color: #1033d2;
transform: skewX(-45deg) translateX(5px) rotate(-5deg);
}
.react-left .text {
	display: inline-block;
	transform: skewX(-45deg);

}

.react-left .text:hover {
	color: #105bda;
    text-decoration: underline;
   cursor: pointer;
}
.react-right:hover {
  background-color: #1f2850;

}
</style>